<!--
 * @Author: 码上talk|RC
 * @Date: 2020-09-29 16:06:55
 * @LastEditTime: 2021-01-06 15:57:58
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /tacomall-merchant/src/pages/goods/info.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
    <div class="goods-info">
        <div class="gi-section gi-base">
            <div class="gs-title">
                <span>商品概要</span>
            </div>
            <div class="gs-content">
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <span>商品编号：</span>
                                <span>QSDFF093275JCS</span>
                            </td>
                            <td>
                                <span>商品名称：</span>
                                <span>{{goods.name}}</span>
                            </td>
                            <td>
                                <span>商品金额：</span>
                                <span>{{goods.amount}}</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>市场售价：</span>
                                <span>{{goods.marketAmount}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="gi-section gi-spec">
            <div class="gs-title">
                <span>商品规格</span>
            </div>
            <div class="gs-content">
                <i-table :columns="columns" :data="tableData">
                    <template slot-scope="{ row }" slot="cover">
                        <div class="table-cover">
                            <img-video-previewer :src="row.cover"></img-video-previewer>
                        </div>
                    </template>
                </i-table>
            </div>
        </div>
        <div class="gi-section gi-img">
            <div class="gs-title">
                <span>图文详情</span>
            </div>
            <div class="gs-content"></div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
import { Goods } from '@/model/goods'
import imgVideoPreviewer from '@/components/img-video-previewer'
export default {
    components: {
        imgVideoPreviewer
    },
    data() {
        return {
            params: this.$route.query,
            goods: new Goods(),
            columns: [
                {
                    title: '规格名称',
                    key: 'name'
                },
                {
                    title: '商品图片',
                    slot: 'cover',
                    width: 200
                },
                {
                    title: '属性',
                    key: 'attr'
                },
                {
                    title: '价格',
                    key: 'amount'
                }
            ]
        }
    },
    computed: {
        tableData() {
            return this.goods.items.map(i => {
                return i
            })
        }
    },
    methods: {
        init() {
            Goods.API('info', { params: { id: this.params['id'] }, data: {} }).then(res => {
                const { data } = res
                this.goods = new Goods(data)
                console.log(this.goods)
            })
        },
    },
    created() {
        this.init()
    }
}
</script>

<style lang="less">
.goods-info {
    .gi-section {
        padding: 10px;
        background: white;
        .gs-title {
            display: flex;
            align-items: center;
            height: 60px;
            border-bottom: 1px solid #f7f7f7;
            span {
                font-size: 16px;
                color: #000;
            }
        }
        .gs-content {
            padding: 20px 0;
        }
        &:not(:first-child) {
            margin-top: 20px;
        }
    }
    .gi-base {
        table {
            width: 100%;
            tbody {
                tr {
                    &:not(:last-child) {
                        td {
                            padding-bottom: 16px;
                        }
                    }
                }
            }
        }
    }
    .gi-spec {
        .table-cover {
            position: relative;
            display: inline-block;
            width: 100%;
            height: 163px;
            padding: 20px;
        }
    }
}
</style>